<template>
    <div class="user-recharge">
        <ul class="bank-list" v-if='userInfo'>
            <li class="bank__item" v-if='userInfo.bankcard'>
                <div class="bank__info">
                    <img :src="userInfo.bankcard.logoUrl">
                    <div class='bank__text' v-if='userInfo.bankcard'>
                        <p>{{userInfo.bankcard.bankName}}</p>
                        <span>{{userInfo.bankcard.cardNo | bankCard}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="money">
            <input class='money__input' type="tel" placeholder="请输入充值金额" v-model='rechargeMoney'>
        </div>

        <!-- <p class="tips">充值手续费2.5元/笔，单次充值≥500元免手续费</p> -->

        <div class="confirm-button">
            <span class="button long" @click='confirm'>充值</span>
        </div>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>

        <sms-code
            v-if='userInfo'
            :show='showSmsCode'
            :mobile='userInfo.user.mobile'
            type='CHARGE'
            @close='showSmsCode=false'
            @finish='smsFinish'></sms-code>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import payPassword from '../components/PayPassword.vue'
    import smsCode from '../components/SmsCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import bankCard from '../filters/filter-bankCard'
    import { getQueryString } from '../utils/utils'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, payApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            payPassword,
            smsCode
        },
        filters:{
            bankCard
        },
        data() {
            return {
                rechargeMoney:'',
                passwordPass:false,
                password:'',
                showPayPassword:false,
                showSmsCode:false,
                payId:'',
                smsCode:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),

            // function
            confirm(){
                // return
                if(this.rechargeMoney == ''){
                    this.setMsgTip({
                        text:'充值金额不能为空',
                        type:'warn'
                    })
                    return
                }
                // if(this.rechargeMoney < 100){
                //     this.setMsgTip({
                //         text:'充值金额不能不能小于100元',
                //         type:'warn'
                //     })
                //     return
                // }
                if(this.passwordPass) {
                    this.showSmsCode = true
                }
                else {
                    this.showPayPassword = true
                }
            },
            payFinish(password){
                this.password = password
                this.passwordPass = true
                this.recharge()
            },
            smsFinish(smsCode){
                this.smsCode = smsCode
                this.showSmsCode = false
                this.recharge()
            },
            recharge(){
                this.showLoading()
                userApi.recharge({
                    chargeAmount:Math.round(this.rechargeMoney * 100),
                    tradePassword:this.password,
                    smsCode:this.smsCode
                })
                .then(result=> {
                    this.payId = result.payId
                    this.pay()
                })
                .catch(error=> {
                    console.log(error);
                    this.hideLoading()
                })
            },
            pay(){
                payApi.pay({
                    payId:this.payId,
                    returnUrl:location.href
                })
                .then(result=> {
                    location.href = result.payParam.url
                })
                .catch(error=> {
                    console.log(error);
                    this.hideLoading()
                })
            },
        },
        created(){
            let status = this.$route.query.status
            if(status == 'fail'){
                this.setMsgTip({
                    text:'充值失败！',
                    type:'error'
                })
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'充值成功！',
                    type:'success'
                })
                this.$router.replace({
                    name:'user-index'
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-recharge{
        .bank-list{
            background-color: #fff;
            margin-top: 16px;
        }
        .bank__item{
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items:center;
        }
        .bank__info{
            display: flex;
            img{
                width: 48px;
                height: 48px;
                border-radius:50%;
            }
            .bank__text{
                padding-left: 16px;
                p{
                    @extend %font-subhead;
                    color:$importColor;
                }
                span{
                    @extend %font-caption;
                    display: block;
                    padding-top: 2px;
                }
            }
        }
        .money{
            background-color: #fff;
            margin-top: 27px;
            position: relative;
            .button{
                position: absolute;
                height:100%;
                line-height:56px;
                right:0;
                top:50%;
                transform:translate(0,-50%);
            }
        }
        .money__input{
            @extend %font-subhead;
            padding:15px 24px;
            width: 100%;
            box-sizing:border-box;
        }
        .tips{
            @extend %font-caption;
            padding: 12px 24px;
        }
        .confirm-button{
            padding:30px 24px 30px 24px;
        }
    }

</style>
